
<template>
  <view class="container">
	<view class="view1">
		<u--image :src="imageUrl" class="image1" width="100%" height="460rpx"></u--image>
	</view>
	 
    <view class="course-title" >有氧拉丁课程体验</view>
	
    <view class="description">提高了身体的协调性和曲线感</view>
	<!-- 灰色的线 -->
	<view class="GrayLine"></view>
    <!--预约学员-->
	<view class="booking1">
		<view class="arborescence"></view>
		<view class="bookingStudent">预约学员</view>
	</view>
	<!-- 灰色的线2 -->
	<view class="GrayLine2"></view>
	<!-- 瀑布流 -->
	
	<view class="container1">
		<view
		  class="cont-box"
		  :style="{ '--layout-width': 100 / flowData.column - flowData.columnSpace + '%' }"
		  v-for="(numVal, index) in flowData.column"
		  :key="numVal"
		>
		  <view class="item-box" v-for="(item, j) in flowData[`column_${index + 1}`]" :key="j">
		    <image class="img-tip" :src="item.imgUrl" mode="widthFix" lazy-load />
		    <view class="tit-tip multi-line-omit">{{ item.title }}</view>
		    <view class="desc-tip multi-line-omit">{{ item.desc }}</view>
		  </view>
		</view>
	</view>
  </view>
</template>

<script>
import { METHODS } from 'http';
export default {
  data() {
    return {
		flowData: {
		  list: [], // 数据值
		  column: 2, // 瀑布列数
		  columnSpace: 2 // 瀑布列宽间距
		},
		imageUrl:"../../../static/images/dance1.png"
	}
	
  },
  created() {
    /* 初始化每一列的数据 */
    for (let i = 1; i <= this.flowData.column; i++) {
      this.$set(this.flowData, `column_${i}`, []);
    }
  },
  onLoad() {
    /* 数据赋值 */
    this.flowData.list = [
      {
        imgUrl:	"../../../static/images/nvs.jpg",
        title: "马六：",
        desc: "2133333，213333、123333333323112。"
      },{
        imgUrl: "../../../static/images/dance1.png",
        title: "张三",
        desc: "男，213。"
      },
      {
        imgUrl: "../../../static/images/nvs.jpg",
        title: "马六：",
        desc: "2133333，213333、123333333323112。"
      },
      {
        imgUrl: "../../../static/images/dance1.png",
        title: "李四：",
        desc: "2133333，213333、123333333323112。"
      },
      {
        imgUrl: "../../../static/images/dance1.png",
        title: "王五：",
        desc: "2133333，213333、123333333323112，2133333，213333、123333333323112。"
      },
      {
        imgUrl: "../../../static/images/nvs.jpg",
        title: "马六：",
        desc: "2133333，213333、123333333323112。"
      }
    ];
    this.$nextTick(() => {
      this.initData(); // 数据初始化
    });
  },
  methods:{
	 /* 数据初始化 */
	 initData() {
	   const groupList = this.dynamicGrouping(this.flowData.list, this.flowData.column); // 数据动态分组
	   groupList.forEach((item, i) => (this.flowData[`column_${i + 1}`] = item));
	 },
	 /** 数据动态分组
	  * @param {Object} data 分组的数据列表
	  * @param {Object} i 需要分几组
	  * @returns {Array} groups 已分组的数据
	  */
	 dynamicGrouping(data, i) {
	   if (i <= 0) return "分组数必须大于0";
	   const groups = [];
	   for (let j = 0; j < i; j++) {
	     groups.push([]);
	   }
	   for (let k = 0; k < data.length; k++) {
	     const groupIndex = k % i;
	     groups[groupIndex].push(data[k]);
	   }
	   return groups;
	 }
  }
};
</script>
<!-- @author md -->
<style>
.view1{
	width: 100%;
	height: 30vh;
}

.GrayLine{
	width: 140vh;
	height: 25rpx;
	background-color: rgb(244,244,244);
	margin-left:-40rpx ;
	margin-top: 20rpx;
}
.GrayLine2{
	width: 140vh;
	height: 10rpx;
	background-color: rgb(244,244,244);
	margin-left:-40rpx ;
	margin-top: 20rpx;
}
.container {
  padding: 20px;
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);
  height: 100%;
  background-color: white;
}
.course-title {
  font-size: 20px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}
.description {
  margin-top: 12px;
  font-size: 16px;
  color: rgb(150,150,150);
}
.arborescence{
	display: inline-block;
	background-color: black;
	width: 0.8vh;
	height: 48rpx;
	color: black;
    border-radius: 10px;
}
.booking1{
	display: flex;
	align-items: center;
	margin-top: 20rpx;
	margin-left: 10rpx;
}
.bookingStudent{
	margin-left: 8px;
	font-weight: 700;
}
.container1 {
  display: flex;
  justify-content: space-between;
  padding: 20rpx;
  $borderRadius: 12rpx;
  .cont-box {
    width: var(--layout-width);
    .item-box {
      width: 100%;
      padding-bottom: 20rpx;
      margin-bottom: 30rpx;
      border-radius: $borderRadius;
      box-shadow: 0rpx 3rpx 6rpx rgba(0, 46, 37, 0.08);
      .img-tip {
        width: 100%;
        border-radius: $borderRadius $borderRadius 0 0;
      }
      .tit-tip {
        text-align: justify;
        font-size: 30rpx;
        padding: 10rpx 20rpx 0;
        font-weight: 900;
      }
      .desc-tip {
        text-align: justify;
        font-size: 26rpx;
        padding: 5rpx 20rpx 0;
        margin-top: 10rpx;
      }
    }
  }
}
/* 多行省略 */
.multi-line-omit {
  word-break: break-all; // 允许单词内自动换行，如果一个单词很长的话
  text-overflow: ellipsis; // 溢出用省略号显示
  overflow: hidden; // 超出的文本隐藏
  display: -webkit-box; // 作为弹性伸缩盒子模型显示
  -webkit-line-clamp: 2; // 显示的行
  -webkit-box-orient: vertical; // 设置伸缩盒子的子元素排列方式--从上到下垂直排列
}
/* 单行省略 */
.one-line-omit {
  width: 100%; // 宽度100%：1vw等于视口宽度的1%；1vh等于视口高度的1%
  white-space: nowrap; // 溢出不换行
  overflow: hidden; // 超出的文本隐藏
  text-overflow: ellipsis; // 溢出用省略号显示
}
</style>
